// 1. 导入`react-dom/client`
// import React from 'react';
import ReactDOM from 'react-dom/client';

// 2 创建渲染的根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 条件数据
const isLoading = true;

// 1 通过函数实现条件渲染
const fn = () => {
  if (isLoading) {
    return <div>数据加载中...</div>;
  }
  return <div>数据加载完毕</div>;
};

// 2 三元表达式

// UI
// const list = <div>{fn()}</div>;
// const list = (
//   <div>{isLoading ? <div>数据加载中...</div> : <div>数据加载完毕</div>}</div>
// );
const list = <div>{isLoading && <div>数据加载中...</div>}</div>;

// 渲染UI
root.render(list);
